#![allow(non_snake_case)]

use leptos::prelude::*;
#[derive(PartialEq, PartialOrd, Eq, Ord, Debug, Clone)]
pub(super) struct FileProcess {
    pub(super) filename: String,
    pub(super) size: usize,
    pub(super) current: usize,
}
#[derive(PartialEq, PartialOrd, Eq, Ord, Debug, Clone)]
pub(crate) enum ProcessType {
    Upload,
    Import,
    Succeed(u64),
    Failure(String),
    None,
}
#[component]
pub fn ProcessList(
    #[prop(into)] fps: ReadSignal<Vec<FileProcess>>,
    #[prop(into)] proc_type: ReadSignal<ProcessType>,
) -> impl IntoView {
    let sigle_view = move || {
        fps.with(|ps| {
            let run_name = match proc_type.get() {
                ProcessType::Upload => "上传",
                ProcessType::Import => "导入",
                _ => "",
            };
            let mess = format!("正在{}{}", run_name, &ps[0].filename);
            let progress = (ps[0].current as f64 / ps[0].size as f64) * 100.0;
            let style = format!("--value:{}; --size:12rem; --thickness: 1rem;", progress);
            view! {
              <div class="flex flex-row items-center space-x-4">
                <div
                    class="radial-progress"
                    style={style}
                    role="progressbar">
                    {progress}%
                </div>
                <p>{mess}</p>
              </div>
            }
            .into_view()
        })
    };
    let multiple_view = move || {
        fps.with(|ps|{
            let li_view=move|fp:&FileProcess|{
                let progress = (fp.current as f64 / fp.size as f64) * 100.0;
                let file_name=fp.filename.clone();
                let mess=if progress==0.0{
                    "等待".to_owned()
                }else if progress==100.0{
                    "完成".to_owned()
                }else{
                    let run_name=match proc_type.get() {
                        ProcessType::Upload => "上传",
                        ProcessType::Import => "导入",
                        _ => "",
                    };
                    format!("{}:{}%",run_name,progress)
                };
                view! {
                    <li class="pb-3 sm:pb-4">
                        <div class="flex items-center space-x-4 rtl:space-x-reverse">
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
                                    {file_name}
                                </p>
                                <p class="text-sm text-gray-500 truncate dark:text-gray-400">
                                    <progress class="progress progress-success w-56" value={progress} max="100"></progress>
                                </p>
                            </div>
                            <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
                                {mess}
                            </div>
                        </div>
                    </li>
                }
            };
            view! {
                <ul class="max-w-md divide-y divide-gray-200 dark:divide-gray-700">
                    {ps.iter().map(|fp|li_view(fp)).collect_view()}
                </ul>
            }.into_view()
        })
    };
    view! {
        <div class="flex justify-center items-center w-full">
            {move||proc_type.with(move |pt| {
                let fps_len = fps.with(|ps| ps.len());
                match pt {
                    ProcessType::Upload | ProcessType::Import => {
                        if fps_len == 1 {
                            sigle_view().into_any()
                        } else {
                            multiple_view().into_any()
                        }
                    },
                    ProcessType::Succeed(count) => view! {
                        <div class="stats shadow">
                            <div class="stat">
                                <div class="stat-title">导入成功</div>
                                <div class="stat-value">{*count}</div>
                                <div class="stat-desc">行excel数据</div>
                            </div>
                        </div>
                    }.into_any(),
                    ProcessType::Failure(err_msg) => {
                        let li_view=err_msg.split("\n").enumerate().map(|(i,msg)|{
                            let msg2=if i == 0 {
                                msg[31..].to_owned()
                            }else{
                                msg.to_owned()
                            };
                            view! {
                                <li>{msg2}</li>
                            }
                        }).collect_view();
                        view! {
                            <div class="flex flex-col items-center justify-center">
                                <h2 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">导入失败, 原因如下: </h2>
                                <ul class="max-w-md space-y-1 text-gray-700 list-disc list-inside dark:text-gray-400">
                                    {li_view}
                                </ul>
                            </div>
                        }.into_any()
                    },
                    ProcessType::None => view! {<div/>}.into_any(),
                }
            })}
        </div>
    }
}
